<template>
  <!--  先存放在这里后续添加权限，封装成组件处理。 -->
  <div class="sys-op">
    <div class="sys-op__item" @click="showModal">
      <a-button type="primary">新增</a-button>
    </div>
    <div class="sys-op__item">
      <a-button type="danger">删除</a-button>
    </div>
  </div>
  <a-table
    :columns="columns"
    :data-source="sourceData"
    :row-selection="rowSelection"
    :pagination="pagination"
    bordered
    size="middle"
    rowKey="id"
  >
    <template #status="{ text: status }">
      <span>
        <a-tag color="#108ee9" v-if="status">{{ status ? "开启" : "禁用" }}</a-tag>
      </span>
    </template>
    <template #roleName="{ text }">
      <a-tag color="#4165d7">{{ text }}</a-tag>
    </template>
  </a-table>
  <a-modal
    v-model:visible="visible"
    title="新增用户"
    width="50vw"
    ok-text="确认"
    cancel-text="取消"
    @ok="hideModal"
  >
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="用户名" v-bind="validateInfos.username">
        <a-input v-model:value="modelRef.username" />
      </a-form-item>
      <a-form-item label="密码" v-bind="validateInfos.password">
        <a-input v-model:value="modelRef.password" />
      </a-form-item>
      <a-form-item label="昵称" v-bind="validateInfos.name">
        <a-input v-model:value="modelRef.name" />
      </a-form-item>
      <a-form-item label="性别" v-bind="validateInfos.gender">
        <a-radio-group v-model:value="modelRef.gender">
          <a-radio value="1"> 男 </a-radio>
          <a-radio value="2"> 女 </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="手机号" v-bind="validateInfos.name">
        <a-input v-model:value="modelRef.name" />
      </a-form-item>
      <a-form-item label="邮箱" v-bind="validateInfos.email">
        <a-input v-model:value="modelRef.email" />
      </a-form-item>
      <a-form-item label="头像" v-bind="validateInfos.head_image">
        <a-upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          list-type="picture-card"
          :file-list="modelRef.head_image"
          @change="handleChange"
        >
          <div v-if="modelRef.head_image.length < 1">
            <plus-outlined />
            <div class="ant-upload-text">上传</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item label="备注" v-bind="validateInfos.name">
        <a-input v-model:value="modelRef.remark" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { defineComponent, onMounted, reactive, toRaw, toRefs } from "vue"
import { useForm } from "@ant-design-vue/use"
import { PlusOutlined } from "@ant-design/icons-vue"
import { getUserRoleList } from "@/service/role"
import { useModal } from "@/hooks/use-modal"
const columns = [
  { title: "名称", width: 150, dataIndex: "name", key: "name" },
  { title: "表示", width: 150, dataIndex: "label", key: "label" },
  { title: "备注", width: 100, dataIndex: "remark", key: "remark" },
  {
    title: "创建时间",
    width: 100,
    dataIndex: "create_datetime",
    key: "create_datetime"
  },
  {
    title: "更新时间",
    width: 100,
    dataIndex: "update_datetime",
    key: "update_datetime"
  }
]

const pagination = {
  pageSizeOptions: ["10", "20", "30", "40", "50"],
  current: 1,
  pageSize: 10,
  total: 50
}

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows)
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  }
}

export default defineComponent({
  components: { PlusOutlined },
  setup() {
    const { visible, showModal, hideModal } = useModal()

    const roleRef = reactive({
      sourceData: []
    })

    /**
     *  新增用户
     */
    onMounted(async () => {
      const result = await getUserRoleList()
      roleRef.sourceData = result.object_list
    })

    /**新增用户相关 */

    const modelRef = reactive({
      username: "",
      password: "",
      name: "",
      gender: null,
      mobile: "",
      email: "",
      head_image: [],
      remark: ""
    })
    const rulesRef = reactive({
      username: [
        {
          required: true,
          message: "请输入用户名"
        }
      ],
      password: [
        {
          required: true,
          message: "请输入用户密码"
        }
      ]
    })
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)
    const onSubmit = e => {
      e.preventDefault()
      validate()
        .then(() => {
          console.log(toRaw(modelRef))
          const postData = toRaw(modelRef)
          postData.head_image = toRaw(modelRef).head_image.length
            ? toRaw(modelRef).head_image[0]
            : "erere"
          // createUser(toRaw(modelRef)).then(response => {
          //   console.log("333", response)
          // })
        })
        .catch(err => {
          console.log("error", err)
        })
    }

    /**
     * 图片上传
     */

    const handleChange = () => {
      return
    }

    return {
      ...toRefs(roleRef),
      columns,
      rowSelection,
      pagination,
      showModal,
      hideModal,
      visible,
      labelCol: { span: 3 },
      wrapperCol: { span: 12 },
      validateInfos,
      resetFields,
      modelRef,
      onSubmit,
      handleChange
    }
  }
})
</script>
